<template>
  <div class="home-container">
    <!-- 顶部导航栏 @click-right是组件提供的事件 -->
    <van-nav-bar fixed @click-right="toSearch">
      <!-- 自定义左侧结构 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 自定义右侧结构 -->
      <template #right>
        <van-button round class="search-btn" size="small" icon="search"
          >搜索</van-button
        >
      </template>

      <!-- 也提供了title的插槽可以让我们自定义标题区域
         <template #title>
        <span style="font-size:40px">🦧</span>
      </template> -->
    </van-nav-bar>
    <!-- 横向滑动条 -->
    <!-- 内容 -->
    <van-tabs v-model="active">
      <!-- 频道 -->
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!-- 使用列表组件  别漏了: 传入的就是字符串-->
        <articleList :channelId="item.id"></articleList>
        <!-- <div v-for="v in 50" :key="v">内容 {{ item }}---{{ v }}</div> -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import { getChannels } from '../../api/home'
// 导入组件
import articleList from './articleList.vue'
export default {
  name: 'home',
  data () {
    return {
      // 选中的tab
      active: 0,
      // 频道
      channels: []
    }
  },
  methods: {
    toSearch () {
      this.$router.push({ path: '/search' })
    }
  },
  // 注册
  components: {
    articleList
  },
  async created () {
    // await 才可以帮我们.then 获取结果
    const res = await getChannels()
    // console.log('res:', res)
    this.channels = res.data.data.channels
  }
}
</script>

<style lang="less">
.home-container {
  height: 100vh;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;
  .van-nav-bar {
    background-color: #3296fa;
  }

  .van-tabs {
    height: 100%;
    padding-top: 44px;
    // tab栏标题
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 30px;
      top: 46px;
    }
    .van-tabs__content {
      overflow-y: scroll;
      height: 100%;
    }
  }
  .van-tab {
    padding: 0 16px;
  }
  .van-tabs__line {
    background-color: #3196fa;
  }
  // logo区域
  .logo {
    // 样式中 ~@ 等同于代码中的@ src路径开头
    background: url('~@/assets/logo.png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 100px;
    font-size: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
}
</style>
